<template>
  <a-input v-model="typeText" @change="blurFn" placeholder="请输入卡号"
    ><template #suffix> <icon-plus @click="opens" style="cursor: pointer" /> </template
  ></a-input>
  <!-- 多卡搜索 -->
  <a-modal
    v-model:visible="cardsVisible"
    @before-close="colse"
    title="多条件搜索"
    width="400px"
    :mask-closable="false"
    title-align="start"
  >
    <a-textarea
      style="width: 100%"
      v-model="card"
      placeholder="请输入搜索条件，一行一个"
      allow-clear
    />
    <template #footer>
      <a-space>
        <a-button @click="cardsVisible = false">取消</a-button>
        <a-button type="primary" @click="cardsFn">确定</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref, toRef, watch } from 'vue'
  export default defineComponent({
    name: 'Inputs',
    props: {
      cards: {
        type: String,
        require: true,
      },
    },
    emits: ['update', 'set'],
    setup(props, { emit }) {
      const tempTableProps = toRef(props, 'cards')
      const typeText = ref('')
      const cardsVisible = ref(false)
      const card = ref('')
      function cardsFn() {
        const arr = card.value.split(/\n/g)
        typeText.value = arr.toString()
        cardsVisible.value = false
        emit('update', typeText.value)
      }

      function blurFn() {
        emit('update', typeText.value)
      }

      const opens = () => {
        cardsVisible.value = true
      }
      const colse = () => {
        cardsVisible.value = false
      }
      watch(
        () => tempTableProps.value,
        (oldVal: any) => {
          typeText.value = oldVal
          console.log(oldVal)
        }
      )
      return {
        typeText,
        cardsVisible,
        card,
        cardsFn,
        colse,
        opens,
        blurFn,
      }
    },
  })
</script>

<style lang="less" scoped></style>
